/*
 * @Author: Choisaaaa
 * @Date: 2018/5/11  20:51
 *  商品详细信息显示
 *  待优化：下拉框设置不可以修改值的时候，因为不具有readonly属性；所以是通过JS赋值实现
 */

require("./seller-product-detail.css");
require("page/common/header/header.js");
var nav = require("page/common/nav/nav.js");
var _mm = require("util/mm.js");
var navSide = require("page/common/nav-side/nav-side.js");              //侧边导航模块
var _product = require("service/product-service.js");                   //商品的数据请求
var _productCategory = require("service/product-category-service.js");  //商品种类数据请求
var productDetailTemplate = require("./seller-product-detail.string");  //页面渲染的HTML模板

var page = {
    data : {
        productId : _mm.getUrlParam("pid"), //缓存商品ID
        parentCategoryId : "",              //缓存商品的二级品类品类ID
        categoryId : ""                     //缓存商品的一级商品品类ID
    },
    init : function(){
        this.onLoad();
        this.bindEvent();
    },
    onLoad : function () {
        this.onLoadSide();              //加载侧边导航
         this.onLoadProductDetail();    //加载商品信息信息
    },
    bindEvent : function () {
        this.onClickImage();           //点击商品详细图片
        this.closePicture();           //关闭全屏显示的图片
        this.onClickFirstCategory();   //点击一级商品品类下拉框
        this.onClickSecondCategory();  //点击二级商品品类下拉框
    },

    /** 1.初始化加载页面时的数据渲染 **/
    //1.1:初始化侧边导航
    onLoadSide : function(){
        navSide.init({
            name : "seller-center"
        });
    },
    //1.2：加载中商品的详细信息
    onLoadProductDetail : function () {
        var _this = this;
        _product.getSellerProductDetail(this.data.productId, function (res) {
            _this.onLoadImages(res.data);
            _this.data.parentCategoryId = res.data.parentCategoryId;//缓存商品品类id
            _this.data.categoryId = res.data.categoryId;
            var html = _mm.renderHtml(productDetailTemplate,res.data);
            $(".seller-product-detail").html(html);      //渲染基本信息
            _this.onLoadDetailHtml(res.data.productDesc);//渲染详细信息
            _this.onLoadFirstCategoryHtml();             //渲染一级商品品类下拉框
            _this.onLoadSecondCategoryHtml();            //渲染二级商品品类下拉框
        }, function (err) {
            _mm.errorTips(err.msg)
        });
    },

    //1.2.1:渲染商品的详细信息
    onLoadDetailHtml : function (html) {
        $("#detail").html(html);
    },

    //1.2.2:渲染一级商品品类下拉框
    onLoadFirstCategoryHtml : function () {
        var _this = this;
        _productCategory.getCategoryList(null, function (res) {
            _this.LoadFistSelect(res.data);
        }, function (err) {
            _mm.errorTips(err.msg)
        })
    },
    LoadFistSelect : function (data) {
        var html = this.renderOptionHtml(data),
            $firstCategory  = $("#firstCategory");
        $firstCategory.html(html);
        $firstCategory.val(this.data.parentCategoryId);
    },

    //1.2.3:渲染二级商品品类下拉框
    onLoadSecondCategoryHtml : function () {
        var _this = this;
        _productCategory.getCategoryList(this.data.parentCategoryId, function (res) {
            _this.LoadSecondSelect(res.data);
        }, function (err) {
            _mm.errorTips(err.msg)
        })
    },
    LoadSecondSelect: function (data) {
        var html = this.renderOptionHtml(data),
            $firstCategory  = $("#secondCategory");
        $firstCategory.html(html);
        $firstCategory.val(this.data.categoryId);
    },

    /** 2.事件 **/
    //2.1：点击商品详细图片实现全屏显示
    onClickImage : function () {
        $(document).on("click",".img", function () {
            var src = $(this).attr("src");
            var imgHtml = '<div class="onClickImage-div">' +
                '<img class="onClickImage-img" src="' + src + '"/>' +
                '<p class="onClickImage-p closePicture">×</p>' +
                '</div>'
            $('body').append(imgHtml);
        });
    },

    //2.2：关闭全屏显示的详细图片
    closePicture : function () {
        $(document).on("click",".closePicture", function () {
            $(this).parent("div").remove();
        })
    },

    //2.3:一级商品种类的点击事件
    onClickFirstCategory : function () {
        var _this = this;
        $(document).change("#firstCategory", function () {
            $("#firstCategory").val(_this.data.parentCategoryId);//不修改值
        })
    },

    //2.4:一级商品种类的点击事件
    onClickSecondCategory : function () {
        var _this = this;
        $(document).change("#secondCategory", function () {
            $("#secondCategory").val(_this.data.categoryId);//不修改值
        })
    },

    /** 3.辅助函数 **/
    //3.1：渲染下拉框子选项
    renderOptionHtml : function(data){
        var html = "";
        data.map(function (item) {
            html += '<option value="'+item.id+'">'+item.productCategoryName+'</option>'
        });
        return html;
    },

    //3.2往data对象追加一个subImages属相，存放图片URL
    onLoadImages : function (data) {
        var host = data.imageHost,
            subImages =data.subImgsAddr;
        var images = subImages.split(",");
        data.subImages = images.map(function (imageUri) {
            return{
                url :host+imageUri
            }
        });
    }
}
$(function () {
    page.init();
});